<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
<script type="text/javascript" src="JavaScript/main.js"></script>
<script type="text/javascript">
    var currentPlaylistObj;
    var ajaxFile='Ajax.php';

    Event.observe(window, 'load', function() {
        $('searchButton').observe('click',searchSong);
        isLoggedInR();
    });
    
</script>
<title>IKE Music Player</title>
</head>

<body>
    <div id="blanket"></div><!-- dit zorgt er voor dat de hele pagina behalve de popup een lagere opacity krijgt-->
    
    <div id="loginDiv" class="popupt">
        <h3>Enter you username and password</h3>
            <form id="loginform" action="javascript:logIn();" method="post" name="contact_form" >
                        <input  type="text" name="user" placeholder="username" id="email"/>
                        <input type="password" name="pass" placeholder="password" id="password"/>
                        <button id="loginbutton" type="submit" >login</button>
            </form> 
        <div id="errorLogin"></div>
        <div class="link" onclick="popup('loginDiv')">Close window</div>
    </div>
    
    <div id="selectPlaylist" class="popupt">
        <div id="styleSelectPlaylist">
            <h3>Select a playlist to add this track</h3>
            <select id="selectSPlaylist">
            </select>
            <hr/>
            <h3>Or create a new playlist</h3>
            <form action="javascript:addTrack(null);">
                <input type="text" id="selectNamePlaylist"/>
                <button type="submit">Save</button>
            </form> 
        </div>
        <div class="link" onclick="popup('selectPlaylist')">Close window</div>
    </div>
    <div id="top">
        <div id="whitespace" style="width:40%;float:left;display:block;height:50px;"></div>
            <img src="logo.png" id="logo" />
          <div id="login">
                <span id="reg"><a href="reg.html">Register</a><a href="#" onclick="popup('loginDiv')">  Login</a></span><br/>
                <span id="loggedIn"></span>
        </div>
    </div>

    <div id="blackbar">

        <form id="searchForm" action="javascript:searchSong();" method="post" name="contact_form">
              <input type="text" name="user" placeholder="Search for your song or artist" id="searchbar"/>
              <input type="button" id="searchButton" value="Go!"/>
        </form>
    </div>
    
    <div id="main">
        <div id="left">
            <div id="menu" class="wrapper">
                <div class="header">
                    <h2>MENU</h2>
                </div>
                <div class="content">
                    <ul>
                        <li onclick="switchMiddle('home');">Home</li>
                        <li onclick="showStatisticsR();">Show statistics</li>
                        <li onclick="showPlaylistsR()">My playlists</li>    
                        <li onclick="showRecommendationR()">Suggestions</li>
                    </ul>
                    <hr/>
                    <ul id="loadingUL">

                    </ul>
                </div>
            </div>
            <div id="currentPlay" class="wrapper">
                <div class="header">
                    <h2>CURRENTLY PLAYING</h2>
                </div>
                <div class="content">
                        <span id="currentArtist" class="link" title="Show artist info"></span>
                        <span id="currentAlbum" class="link" title="Show album info"></span>
                        <span id="currentTrack" class="link" title="Show video"></span>
                        
                        <span>Playlist:</span>
                        <span id="currentPlaylist" class="link" title="Show current playlist"><i>No playlist selected</i></span> 
                        <span>Next songs:</span>
                        <span id="currentNext" class="link" title="Play next track"><i>None</i></span>

                </div>
            </div>
        </div>
        <div id="middle">
            <div id="home" class="wrapper show">
                <div class="header">
                    <h2>
                        <span class="link" onclick="switchMiddle('results')">results</span>
                        <span class="link" onclick="switchMiddle('artist')">artist</span>
                        <span class="link" onclick="switchMiddle('albums')">albums</span>
                        WELCOME
                        <span class="link" onclick="switchMiddle('album')">album</span>
                        <span class="link" onclick="showPlaylistsR()">playlists</span>
                        <span class="link" onclick="switchMiddle('track')">track</span>
                    </h2>
                </div>
                <div class="content">
                  <p> Welcome!</p><br/>
                  <p>We are three second-year students from <a href="http://www.tudelft.nl" class="link">Delft University of Technology</a> located in The Netherlands. We are all students in computer science and in our first semester our main subject is information and knowledge engineering.
                      For our project we created a website where you can search for a song or artist.</p><br/><p> When you click on a song we will fetch the proper youtube video which you will be able to play.<br/> Click on the link 'Suggestions' on your left, to see which artists our system recommends for you. The recommendations are based on your listening history. So the more songs you play, the more accurate they get!<br/>
So wait no longer, register and search for your favorite artist or song!</p>
                </div>
            </div>
            <div id="results" class="wrapper hide">
                <div class="header">
                    <h2>                        RESULTS
                        <span class="link" onclick="switchMiddle('artist')">artist</span>
                        <span class="link" onclick="switchMiddle('albums')">albums</span>
                        <span class="link" onclick="switchMiddle('home')">home</span>
                        <span class="link" onclick="switchMiddle('album')">album</span>
                        <span class="link" onclick="showPlaylistsR()">playlists</span>
                        <span class="link" onclick="switchMiddle('track')">track</span></h2>
                </div>
                <div class="content">
                    <div id="resultResults">
                        <i>No search results</i>
                        <br/>
                        Search for you track, album or artist by using the searchbar above.<br/>
                    </div>
                    <hr/>
                    <h3 style="float:left;">Suggested playlists</h3>
                    <div id="resultPlaylists">
                    </div>
                </div>
            </div>
            <div id="artist" class="wrapper hide">
                <div class="header">
                    <h2>
                        <span class="link" onclick="switchMiddle('results')">results</span>
                        ARTIST
                        <span class="link" onclick="switchMiddle('albums')">albums</span>
                        <span class="link" onclick="switchMiddle('home')">home</span>
                        <span class="link" onclick="switchMiddle('album')">album</span>
                        <span class="link" onclick="showPlaylistsR()">playlists</span>
                        <span class="link" onclick="switchMiddle('track')">track</span>
                    </h2>
                    
                    <div class="content">
                        <div class="bio">
                        <div class="artistLeft">
                                <img  id="artistAvatar" class="avatar"/>
                                <span class="link" onclick="switchMiddle('albums');">Show albums</span>
                            </div>
                            <div id="artistBio">
                                <i>No artist selected</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="albums" class="wrapper hide">
                <div class="header">
                    <h2>
                        <span class="link" onclick="switchMiddle('results')">results</span>
                        <span class="link" onclick="switchMiddle('artist')">artist</span>
                        ALBUMS
                        <span class="link" onclick="switchMiddle('home')">home</span>
                        <span class="link" onclick="switchMiddle('album')">album</span>
                        <span class="link" onclick="showPlaylistsR()">playlists</span>
                        <span class="link" onclick="switchMiddle('track')">track</span>
                    </h2>
                    <div class="content" id="albumsContent">
                        <i>No artist selected</i>
             
                    </div>
                </div>
            </div>
            <div id="album" class="wrapper hide">
                <div class="header">
                    <h2>
                        <span class="link" onclick="switchMiddle('results')">results</span>
                        <span class="link" onclick="switchMiddle('artist')">artist</span>
                        <span class="link" onclick="switchMiddle('albums')">albums</span>
                        <span class="link" onclick="switchMiddle('home')">home</span>
                        ALBUM
                        <span class="link" onclick="showPlaylistsR()">playlists</span>
                        <span class="link" onclick="switchMiddle('track')">track</span>
                    </h2>
                </div>
                <div class="content">
                        <div class="bio">
                            <div class="artistLeft">
                                <p><img  id="albumAvatar" class="avatar"/></p>
                                <span class="focus" onclick="switchAlbumView(this)">Show info</span><br/>
                                <span class="link" onclick="switchAlbumView(this)">Show tracks</span>
                            </div>
                            <div id="albumInfo" class="show">
                                <i>No album selected</i>
                            </div>
                            <div id="albumTracks" class="hide">
                                 <i>No album selected</i>
                            </div>
                        </div>
                </div>
            </div>
            <div id="playlists" class="wrapper hide">
                <div class="header">
                    <h2><span class="link" onclick="switchMiddle('results')">results</span>
                        <span class="link" onclick="switchMiddle('artist')">artist</span>
                        <span class="link" onclick="switchMiddle('albums')">albums</span>
                        <span class="link" onclick="switchMiddle('home')">home</span>
                        <span class="link" onclick="switchMiddle('album')">album</span>
                        PLAYLISTS
                        <span class="link" onclick="switchMiddle('track')">track</span>
                    </h2>
                    
                </div>
                <div class="content" id="playlistRTY">
                   
                </div>
            </div>
            <div id="playlist" class="wrapper hide">
                <div class="header">
                    <h2>PLAYLIST</h2>
                    
                </div>
                <div class="content">
                   
                </div>
            </div>
            <div id="recommendation" class="wrapper hide">
                <div class="header">
                    <h2>Suggestions</h2>
                    
                </div>
                <div class="content">
                    <div id="recommendationList">
                    </div>
                    <hr/>
                    <h3>Suggested artists</h3>
                    <div id="recArtists">
                    </div>
                </div>
            </div>
            <div id="track" class="wrapper hide">
                <div class="header">
                    <h2><span class="link" onclick="switchMiddle('results')">results</span>
                        <span class="link" onclick="switchMiddle('artist')">artist</span>
                        <span class="link" onclick="switchMiddle('albums')">albums</span>
                        <span class="link" onclick="switchMiddle('home')">home</span>
                        <span class="link" onclick="switchMiddle('album')">album</span>
                        <span class="link" onclick="showPlaylistsR()">playlists</span>
                        TRACK</h2>
                </div>
                <div class="content">
                    <div id="ytplayer"></div>
                    
                    <div id="stars">
                        <span>Rate It!</span><br/>
                         <ul class='star-rating'>
                             <li class='current-rating' id='current-rating'></li>
                             <li><a href="#" onclick="vote(1); return false;"
                                 title='1 star out of 5' class='one-star'>1</a></li>
                             <li><a href="#" onclick="vote(2); return false;"
                                 title='2 star out of 5' class='two-stars'>2</a></li>
                             <li><a href="#" onclick="vote(3); return false;"
                                 title='3 star out of 5' class='three-stars'>3</a></li>
                             <li><a href="#" onclick="vote(4); return false;"
                                 title='4 star out of 5' class='four-stars'>4</a></li>
                             <li><a href="#" onclick="vote(5); return false;"
                                 title='5 star out of 5' class='five-stars'>5</a></li>
                         </ul>
                         <div id='current-rating-result' width="100px"></div>
                    </div>
                    <span class="link" id="nextSong" onclick="if($('currentNext').trackID){_track($('currentNext'));};">Next song</span>
                    <hr/>
                    <h3>Current playlist</h3>
                    <div id="trackPlaylist">
                        <h3><i>No current playlist selected</i></h3>
                    </div>
                </div>
            </div>     
            <div id="statistics" class="wrapper hide">
                <div class="header">
                    <h2>STATISTICS</h2>
                </div>
                <div class="content">
                    <div class="title"><span class="focus" onclick="switchStat(this)">Global</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="link" onclick="switchStat(this)">Yours</span></div>
                
                <hr/>
                <div id="globalStat" class="show">
                </div>
                <br/>
                <span id="statisticsInfoG" >The statistics shown above give an overview of the kinds of music the users on this site listen to.<br/><br/>The figures and the width of the bars represents how many times the users listend to that genre.</span>
                <div id="userStat" class="hide" >
                  
                 
                </div>
                <br/>
                <span id="statisticsInfoU" class="hide">The statistics that you see above, gives an overview what kinda genre the you listen to.</span> 
             </div>
        </div>
        </div>
        </div>
    <div id="bottom">
        <span>&copy;2011 VINCENT, POUJA AND PING</span>
    </div>
</body>
</html>
